<script setup lang="ts">
// 主页头部
import {onMounted, ref} from "vue";
import {useCookies} from "vue3-cookies";
import {logoutApi, resetPasswordApi} from "@/assets/api/login";
import {ElMessage, type FormInstance} from "element-plus";
import router from "@/router";
import {ArrowDown} from '@element-plus/icons-vue'
import {getCurrentMenuListApi} from "@/assets/api/systemManagement/system/menu";
import type {Menu} from "@/components/interface/system/menu";
import headerImg from "@/assets/img/img2.png";

// 菜单列表
const menuList = ref();

// 获取菜单列表
const getList = () => {
  getCurrentMenuListApi().then((res) => {
    if (res.data.code !== 200) {
      ElMessage.error(res.data.data)
      return;
    }
    menuList.value = res.data.data.list;
  });
};

// 根据菜单跳转
const toOpenPage = (menu: Menu) => {
  if (menu.menuUrl == null || menu.menuUrl === '')
    return;
  cookies.set("urlRemark",menu.remark);
  router.push({
    path: menu.menuUrl
  });
}

// 登录名显示
const {cookies} = useCookies();
const name = ref('');
// 修改密码抽屉
const updatePasswordDrawer = ref(false)
const form = ref({
  oldPassword: '',
  newPassword: ''
})

const formRef = ref();
const rules = ref({
  oldPassword: [
    {required: true, message: '请输入旧密码', trigger: 'blur'},
  ],
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
  ]
})

const save = async (formEl: FormInstance) => {
  if (!formEl) return
  await formEl.validate((valid: boolean) => {
    if (valid) {
      resetPasswordApi(form.value).then(res => {
        if (res.data.code === 200) {
          ElMessage("修改成功");
          cookies.remove("token");
          cookies.remove("name");
          router.push("/login");
        } else {
          ElMessage(res.data.data);
        }
      })
    }
  })
}

// 退出登录
const logout = () => {
  logoutApi().then(res => {
    if (res.data.code === 200) {
      ElMessage("退出成功");
      cookies.remove("token");
      cookies.remove("name");
      router.push("/login");
    } else {
      ElMessage("退出失败");
    }
  })
}

onMounted(() => {
  getList();
  name.value = cookies.get("name");
});
</script>

<template>
  <div class="app-container">
    <el-row>
      <!--  主页-头部区域 -->
      <el-col class="index-title" :span="4">
        游王子og管理平台
      </el-col>
      <!--  主页-菜单区域 -->
      <el-col :span="17">
        <el-menu
          background-color="rgba(255, 255, 255,0)"
          text-color="#fff"
          active-text-color="#EEE5DE"
          :ellipsis="false"
          mode="horizontal"
        >
          <!-- 是否存在子菜单校验 -->
          <template v-for="(menu,index) in menuList">
            <template v-if="menu.children.length === 0">
              <el-menu-item
                :index="(index+1)+''"
                @click="toOpenPage(menu)"
              >
                <span>{{ menu.name }}</span>
              </el-menu-item>
            </template>
            <template v-else>
              <el-sub-menu :index="(index+1)+''">
                <template #title>
                  <span>{{ menu.name }}</span>
                </template>
                <el-menu-item style="color: #5c5c5c" v-for="(child,i) in menu.children"
                              :index="(index+1)+'-'+(i+1)"
                              @click="toOpenPage(child)">
                  {{ child.name }}
                </el-menu-item>
              </el-sub-menu>
            </template>
          </template>
        </el-menu>
      </el-col>
      <!-- 主页用户区域 -->
      <el-col class="index-user" :span="3">
        <el-avatar :size="35" :src="headerImg" />
        <div class="user-index-right">
          <el-dropdown>
      <span class="el-dropdown-link">
        {{ name }}
        <el-icon class="el-icon--right">
          <arrow-down/>
        </el-icon>
      </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="updatePasswordDrawer = true">修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <!-- 抽屉 -->
    <el-drawer
      v-model="updatePasswordDrawer"
      title="修改密码"
    >
      <el-alert title="提示：修改后将会推出登录状态！" style="margin-bottom: 30px" type="warning"/>
      <el-form :model="form" ref="formRef" label-width="120px" :rules="rules">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save(formRef)">保存</el-button>
          <el-button type="danger" @click="updatePasswordDrawer = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<style scoped>
.app-container {
  background: linear-gradient(to right, #1f45c9, #0f79e2);
  background-size: cover; /* 背景覆盖整个容器 */
  width: 100%;
  height: 100%;
}

.index-title {
  padding-top: 0.8%;
  padding-left: 1.5%;
  cursor: pointer;
  align-items: center;
  font-family: cursive;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 2px #b1b1b1;
}

.index-user {
  padding-top: 0.8%;
  padding-left: 3%;
}

.user-index-right {
  margin-left: 5%;
  display: inline-block;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #e1e1e1;
  display: flex;
  align-items: center;
}
</style>
